---
title: "Accessibility Checker Rule Help: Valerie_Label_HasContent"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### The `<label>` element does not have descriptive text

<div id="locLevel"></div>

A `<label>` element must have non-empty descriptive text that identifies the purpose of the interactive component

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

A descriptive label for an interactive component is necessary to make the component's purpose clear, and allows it to be referred to in voice commands. A label can also include a text symbol such as an asterisk indicating the labelled field is required.

<div id="locSnippet"></div>

### What to do

* Add text to the empty `<label>` element that clearly identifies the purpose of the interactive component being labelled.

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 2.4.6 Headings and Labels](https://www.ibm.com/able/requirements/requirements/#2_4_6)
[WCAG 2.1 technique G131](https://www.w3.org/WAI/WCAG21/Techniques/general/G131)

### Who does this affect?

* Blind people using screen readers
* People with low vision using screen magnification
* People with dexterity impairment using voice control

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
